<template>
  <div>
    Center
    <template class="fqmyyxhjjd" v-if="isShow">
      <div class="fqmyysjjd">fqmyysjjd</div>
    </template>
    <!-- <keep-alive>可以把页面缓存下次回来直接不会再次加载页面, 而是使用缓存 -->
    <div class="content">
      <transition name="fqm" mode="out-in">
        <keep-alive>
          <component :is="which"></component>
        </keep-alive>
      </transition>
    </div>

    <footer>
      <ul>
        <li @click="which = 'home'" :class="which === 'home' ? 'active' : ''">
          Home
        </li>
        <li @click="which = 'list'" :class="which === 'list' ? 'active' : ''">
          List
        </li>
        <li @click="which = 'user'" :class="which === 'user' ? 'active' : ''">
          User
        </li>
      </ul>
    </footer>
  </div>
</template>

<script>
import home from "@/components/test/Home.vue";
import user from "@/components/test/User.vue";
import list from "@/components/test/List.vue";

export default {
  components: {
    home,
    list,
    user,
  },
  data() {
    return {
      isShow: false,
      which: "home",
    };
  },
  mounted() {
    // template在完全编译后舍弃，但是在mounted时仍然还可以改变状态来控制template显示或存在
    this.isShow = !this.isShow;
  },

  //   beforeRouteEnter(to, from, next) {
  //     // 在渲染该组件的对应路由被验证前调用
  //     // 不能获取组件实例 `this` ！
  //     // 因为当守卫执行时，组件实例还没被创建！

  //     if (to.meta.requireVerifide) {
  //       // 模拟取token发送到后端校验
  //       console.log(localStorage.getItem("token"));
  //       console.log(typeof localStorage.getItem("token"));
  //       if (localStorage.getItem("token")) {
  //         next();
  //       } else {
  //         // 给next传递一个url路径--路由路径
  //         // next('/login')
  //         // 传递对象，可以设置path, query等，query就是跟get请求传参一样，此时传递的属性是redirect，值：跳转登录前的一个路由的路径
  //         // 传递这个值是为了实现登陆后直接跳转到之前没有登录或者登录过期的页面（保存到query传到login路由的的路径里），
  //         // 在login登陆成功,直接this.$route.query取对应的参数再直接跳转回去回去
  //         next({
  //           path: "/login",
  //           query: {
  //             redirect: to.fullPath, //写fullPath为了完整的url保持向PageNum这样的参数也能生效,如果登陆失效,直接跳转原来的第几页
  //           },
  //         });
  //       }
  //     } else {
  //       next();
  //     }
  //   },
  //   beforeRouteUpdate(to, from, next) {
  //     // 在当前路由改变，但是该组件被复用时调用
  //     // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
  //     // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  //     // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  //     next()
  //   },
  //   beforeRouteLeave(to, from, next) {
  //     // 在导航离开渲染该组件的对应路由时调用
  //     // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  //     next()
  //   },
};
</script>

<style lang="scss" scoped>
footer {
  height: 50px;
  width: 100%;
  background-color: rgb(59, 116, 167);
}
ul {
  display: flex;
  height: 100%;
  flex-direction: row;
}

li {
  list-style: none;
  width: 34%;
  /* align-items 垂直方向 */
  text-align: center;
  margin: auto;
  line-height: 50px;
}
.content {
  height: 12.5rem;
  font-size: 1.5rem;
  text-align: center;
  display: flex;
  background-color: antiquewhite;
  div{
    margin: auto;
  }
}

.active {
  background-color: beige;
}

.fqm-enter-active {
  animation: enter 0.3s;
}

.fqm-leave-active {
  animation: leave 0.3s;
}

@keyframes enter {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes leave {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
</style>
